/* @flow */

import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  Image,
  FlatList,
} from 'react-native';
// import { BlurView } from 'react-native-blur';

var ItemHeight =80;
var Dimensions = require('Dimensions');

var {width} = Dimensions.get('window');
var {height} = Dimensions.get('window');

export default class HTAnchorFM extends Component {

  static navigationOptions = ({navigation})=>({

    header:<View></View>,
    headerLeft:(
      <TouchableOpacity
        onPress={
          ()=>navigation.goBack()
        }
        >
          <Text style={{color:'blue',marginLeft:20}}>返回</Text>

        </TouchableOpacity>
    ),

    headerTitle:navigation.state.params.anchor.title,

    // headerStyle:{backgroundColor:'#c6dbb8'}

  })

  constructor(props){
    super(props);
    this.state = {
      dataSource:[],
      refreshing:false,
    }
  }

  _flatList

  componentWillMount(){
    const{params} = this.props.navigation.state;

        this.fetchData('http://yiapi.xinli001.com/fm/diantai-jiemu-list.json?key=c0d28ec0954084b4426223366293d190&offset=0&limit=100&diantai_id='+params.anchor.id);


      }

      fetchData = (url) => {
        console.log('====='+url);
        fetch(url,{
          method:'GET',
          headers:{
           'Content-Type': 'application/json'
        },
          // body:JSON.stringify({
          //   // "page":index,
          // })
        }).then((response)=>response.json())
        .then((responseData)=>{

          // let rowData = Array.from(responseData.data.articles);
          console.log(responseData.data);
            this.setState({
              dataSource:this.state.dataSource.concat(responseData.data),
              // dataSource:(responseData.data),
              //  dataSource:this.state.dataSource.concat(responseData.data.articles),
              refreshing:false,

            });
            // dataSource:this.state.dataSource.concat(this.state.dataSource)

          });

      }
    _archorOnRefresh =()=>{
      const{params} = this.props.navigation.state;

      // this.setState({
      //   // page:++this.state.page,
      //   refreshing:true,
      // });
      // this.fetchData('http://yiapi.xinli001.com/fm/diantai-jiemu-list.json?key=c0d28ec0954084b4426223366293d190&offset=0&limit=20&diantai_id='+params.anchor.id);
    }

    _archorHeader = ()=>{
      const{params} = this.props.navigation.state;
      console.log(params);
      return (
        <View style={styles.headerViewStyle}>
        <View style={styles.topPosterStyle}>
          <Image source={{uri:params.anchor.cover}} style={{width:width,height:200,resizeMode:'stretch',}}/>
          <View style ={styles.posterBottomStyle}>
            <View style={styles.postBottomBackStyle}>
              <Image source={{uri:params.anchor.cover}} style={{backgroundColor:'transparent',width:60,height:60,borderRadius:30,borderWidth:1,borderColor:'white',}}></Image>
              <View style ={styles.posterFavStyle}>
                <Text style={styles.favnumTitleStyle}>{params.anchor.title}</Text>
                <Text style={styles.favnumStyle}>{'收听 '+params.anchor.viewnum+' | '+'关注 '+params.anchor.favnum}</Text>
            </View>

            </View>
            <View style={styles.guanzhuViewStyle}>
              <Text style={styles.guanzhuTextStyle}>+关注</Text>
            </View>
          </View>
        </View>
        <View style={styles.middleDetailStyle}>
          <View>

          <Image source={require('../../img/findicon/shenfenPic.png')} style={{width:15,height:15,marginTop:10,marginLeft:10,marginRight:10}}/>
          </View>
          <View style={styles.middleContentStyle}>
            <View style = {{marginLeft:10,marginRight:10,}}>
              <Text style={{color:'#7c7777',fontSize:12,}}>{params.anchor.content}</Text>

            </View>
          </View>
        </View>

        <View style={styles.bottomAllCountStyle}>
          <View style={{width:5,height:30,backgroundColor:'#c9536f',}}>
          </View>
          <View style={styles.rightAllContentStyle}>
            <Text>全部节目  </Text>
            <Text style={{color:'#dfe4df'}}>{'('+this.state.dataSource.length+')'}</Text>
          </View>

        </View>

         </View>
      )
    }
    _archorFooter = ()=>{
      return (
        <View>


         {/* <Text style={[styles.txt,{backgroundColor:'white'}]}>这个是尾新的信息的Header</Text> */}

        </View>
      )
    }
    _archorSeparate =()=>{
      return <View style ={{height:.5,backgroundColor:'#eeebec'}}/>

    }
    _archorKeyExtractor = (item, index) => item.id;


    _archorRenderItem =({item,index})=>{
      console.log(item.title);
      return(
        <TouchableOpacity activeOpacity ={0.5} >
        <View  style={styles.cellStyle}>
          <View style = {styles.lefViewStyle}>
          <Image source={{uri:item.cover}} style={styles.leftImageStyle}/>
          </View>
            <View style = {styles.rightInViewStyle}>
              <Text style={styles.topTextStyle}>{item.title}</Text>
              <Text style={styles.bottomTextStyle}>{'收听 '+item.viewnum}</Text>
            </View>
          </View>
      </TouchableOpacity>
      );


    }
    _listEmptyComponent=()=>{
      return <View style={{width:375,height:300,backgroundColor:'rgb(87, 237, 101)'}}></View>

    }

    anchorFMHeaderView = () => {
      return(
        <View style={styles.customHeaderTopHeaderViewStyle}>
          <TouchableOpacity onPress={()=>this.props.navigation.goBack()}>
            <Image source={require('../../img/findicon/back.png')} style={{width:24,height:24,}}/>
          </TouchableOpacity>
          <Text>{this.props.navigation.state.params.anchor.title}</Text>
          <Image source={require('../../img/findicon/littlePlaying1.png')} style={{width:17,height:17,}}/>
        </View>
      );
    }

  render() {
    const{params} = this.props.navigation.state;

    return (
      <View style={styles.container}>
        <View style={styles.customHeaderViewStyle
        }>
          {this.anchorFMHeaderView()}
          <View style={styles.customBottomViewStyle}></View>
        </View>
        <FlatList
          ref={(flatList)=>this._flatList = flatList}
          ListHeaderComponent = {this._archorHeader}//头组件
          ListFooterComponent = {this._archorFooter}//结尾组件
          ItemSeparatorComponent = {this._archorSeparate}//分割线组件，
          keyExtractor={this._archorKeyExtractor}
          renderItem = {this._archorRenderItem}
          data={this.state.dataSource}
          ListEmptyComponent={this._listEmptyComponent}
          // horizontal={true}
          // numColumns ={cols}//列数 组件内元素必须是等高的,无法支持瀑布流布局
          // columnWrapperStyle={{borderWidth:2,borderColor:'black',paddingLeft:0}}//numColumns大于1时，设置每行的样式
          getItemLayout={(data,index)=>({length: ItemHeight, offset: (ItemHeight+20) * index, index})}
          // onEndReached={this.onEndReached}
          // onEndReachedThreshold ={0.9}
          onRefresh = {this._archorOnRefresh}//在视图开始刷新时调用。指定一个刷新方法，在下拉开始时调用。
          refreshing = {this.state.refreshing}//视图是否应该在刷新时显示指示器。一般用state来控制，
          //在数据加载的时候设置为true，加载完毕以后设置为false
          // initialScrollIndex={100}
          // inverted = {this.state.inverted}
          // legacyImplementation ={true}
          //  scrollToIndex={50}
          onViewableItemsChanged={({viewableItems,changed})=>{
          // console.log(changed);
          }}//当一个新的Item渲染或者隐藏 的时候调用此方法。
          ></FlatList>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor:'white',

  },
  customHeaderViewStyle:{
    backgroundColor:'transparent',
    height:64,
    width:width,
    flexDirection:'column',
    justifyContent:'flex-end',
  },
  customHeaderTopHeaderViewStyle:{
    backgroundColor:'transparent',
    flexDirection:'row',
    justifyContent:'space-between',
    alignItems:'center',
    marginLeft:10,
    marginRight:10,
    marginBottom:10,
  },
  customBottomViewStyle:{
    backgroundColor:'#6b6b6b',
    width:width,
    height:.5,
    marginBottom:1,
  },
  headerViewStyle:{
    backgroundColor:'#eeeeee',
  },
  topPosterStyle:{
    width:width,
    height:200,
    backgroundColor:'transparent',
  },
  posterBottomStyle:{
    position:'absolute',
    bottom:15,
    flexDirection:'row',
    backgroundColor:'transparent',
    justifyContent:'space-between',
    width:width,
    alignItems:'flex-end',
    marginLeft:15,
  },
  postBottomBackStyle:{
    width:width-150,
    height:60,
    marginBottom:5,
    flexDirection:'row',
    alignItems:'flex-end',
    backgroundColor:'transparent',
    justifyContent:'flex-start',
  },
  posterFavStyle:{
    // position:'relative',
    marginLeft:5,
    backgroundColor:'transparent',
    flexDirection:'column',
    justifyContent:'flex-start',
    // backgroundColor:'blue',

  },
  favnumTitleStyle:{
    bottom:20,
    color:'white',
    fontSize:15,
    marginLeft:10,
  },
  favnumStyle:{
    bottom:10,
    color:'white',
    fontSize:12,
    marginLeft:10,
    // backgroundColor:'#cd1d1c',
  },
  guanzhuViewStyle:{
    width:80,
    height:20,
    flexDirection:'column',
    justifyContent:'flex-end',
    backgroundColor:'transparent',
    borderRadius:5,
    marginBottom:15,
    marginRight:35,


  },
  guanzhuTextStyle:{
    backgroundColor:'#07dfab',
    marginRight:10,
    // marginBottom:20,
    color:'white',
    fontSize:15,
    textAlign:'center',
    justifyContent:'center',
     width:80,
     height:20,
  },
  middleDetailStyle:{
    backgroundColor:'white',
    flexDirection:'row',
    justifyContent:'flex-start',
    alignItems:'center',
  },
  middleContentStyle:{
    flexDirection:'row',
    justifyContent:'center',
    width:width-50,
    backgroundColor:'transparent',
  },

  bottomAllCountStyle:{
    flexDirection:'row',
     justifyContent:'flex-start',
    marginTop:10,
    width:width,
    height:30,
    backgroundColor:'white',
  },
  rightAllContentStyle:{
    flexDirection:'row',
    alignItems:'center',
    marginLeft:10,
  },
  cellStyle:{
    flexDirection:'row',
    // alignItems:'center',
    // width:width,
    // height:60,
  },
  lefViewStyle:{
    width:60,
    height:60,
    justifyContent:'center',
    alignItems:'center',
    marginLeft:10,
  },
  leftImageStyle:{
    width:50,
    height:50,
  },
  rightInViewStyle:{
    flexDirection:'column',
    justifyContent:'space-between',
    marginLeft:15,
  },
  topTextStyle:{
    marginTop:10,
  },
  bottomTextStyle:{
    marginBottom:10,
    color:'#333333',
  },
});
